<template>
  <MainDetails />
  <BgLine />
  <BackGround>
    <div class="_main">
      <div class="_main_name">—— 升级 ——</div>
      <div class="_main_m">
        <div class="_main_t1" @click="s.showMenu=true">
          <div>请选择工会等级</div>
          <div>Lv{{s.level}}</div>
        </div>
<!--        <div class="_main_t2">-->
<!--          <div>工会名称</div>-->
<!--          <input type="text" placeholder="请设置名称" />-->
<!--        </div>-->
        <div class="_main_t3">
          <div>消耗KOS数量</div>
          <div>{{ s.cost }} KOS</div>
        </div>
        <div class="_main_t3">
          <div>质押卡牌</div>
          <div>5张{{ $t('color' + s.color) }}卡</div>
        </div>
        <div class="_main_t4">
          <ActiveCard :cardObj="s.items[0]" @click="selectCard(0)"/>
          <ActiveCard :cardObj="s.items[1]" @click="selectCard(1)"/>
          <ActiveCard :cardObj="s.items[2]" @click="selectCard(2)"/>
          <ActiveCard :cardObj="s.items[3]" @click="selectCard(3)"/>
          <ActiveCard :cardObj="s.items[4]" @click="selectCard(4)"/>
        </div>
        <button class="union_join" @click="apply">升级工会</button>
      </div>
    </div>
  </BackGround>

  <van-popup
      v-if="s.showMenu2"
      v-model:show="s.showMenu2"
      closeable
      position="bottom"
  >
    <SelectCard2 :onSelectCard="onSelectCard" :color="s.color" :data="s.data"/>

  </van-popup>

  <van-action-sheet
      v-model:show="s.showMenu"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      close-on-click-action
  />


</template>
<script setup>
import MainDetails from "@components/MainDetails/index.vue";
import BgLine from "@components/BgLine/index.vue";
import BackGround from "@components/BackGroundBox/index.vue";
import ActiveCard from "@components/ActiveCard/index.vue";
import SelectCard2 from "@views/SelectCard2/index.vue";
import {useI18n} from "vue-i18n";
import {useRouter, useRoute} from "vue-router";
import {computed, ref} from "vue";
import http from "../../http";

const {t} = useI18n()
const router = useRouter()
const route = useRoute();

const s = ref({
  showMenu: false,
  showMenu2: false,
  name: '',
  level: route.query.level,
  ids: [0,0,0,0,0],
  selectedIndex: 0,
  items: [
    null,
    null,
    null,
    null,
    null,
  ],
  color: 0,
  cost: 0,
  levels: [],
  data: [],
})

const actions = computed(() => {
  return s.value.levels.map(row => {
    return {
      name: `LV${row[0]}`,
      data: row,
    }
  })
})

function selectCard(i) {
  s.value.selectedIndex = i
  s.value.showMenu2 = true
}

function onSelectCard(card) {
  console.log('onSelectCard=', card);
  s.value.showMenu2=false
  s.value.items[s.value.selectedIndex] = card
}

function onSelect(e) {
  s.value.level = e.data[0]
  s.value.color = e.data[1]
  s.value.cost = e.data[2]
}

async function init() {
  var res = await http.get('/api/union/applyInfo')
  if (res.code === 200) {
    if (res.data.unionStatus !== 2) {
      router.replace('/MyUnion')
      return
    }
    var data = res.data.data.filter(row => row[0] > route.query.level)
    s.value.levels = data
    if (data.length > 0) {
      s.value.level = data[0][0]
      s.value.color = data[0][1]
      s.value.cost = data[0][2]
    }
  }
}

init()

async function apply() {
  var ids = s.value.items.map(row => {
    if (!row) {
      throw Error('ids require');
    }
    return row.id
  }).join(',')
  var level = s.value.level;
  var res = await http.post(`/api/union/upgrade?level=${level}&ids=${ids}`)
  if (res.code === 200) {
    Toast(t('operationSuccess'))
    router.replace('/MyUnion')
  }
}


</script>
<style lang="scss" scoped>
._main_name {
  font-size: 18px;
  @include fontTCMedium;
  font-weight: 500;
  color: $color3;
  line-height: 25px;
}
._main {
  padding: 18px 15px;
  position: relative;
}
._main_m {
  width: 345px;
  height: 405px;
  background: #100d0d;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 63px;
  transform: translateX(-50%);
  padding: 19px 14px 0 14px;
}
._main_t1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    font-size: 14px;
    color: #868686;
    font-family: PingFangTC-Medium, PingFangTC;
    &:nth-child(2) {
      width: 92px;
      height: 32px;
      font-size: 13px;
      font-family: PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: #dea05c;
      line-height: 32px;
      padding-left: 14px;
      background: url("@/assets/UpgradeUnion/icon_selectx.png") no-repeat center;
      background-size: cover;
      text-align: left;
    }
  }
}
._main_t2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  > div {
    font-size: 14px;
    color: #868686;
    font-family: PingFangTC-Medium, PingFangTC;
  }
  > input {
    width: 133px;
    height: 33px;
    padding-left: 10px;
    background: transparent;
    border: 1px solid #868686;
    border-radius: 3px;
    outline: none;
    font-size: 12px;
  }
}
._main_t3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  > div {
    font-size: 14px;
    color: #868686;
    font-family: PingFangTC-Medium, PingFangTC;
    &:nth-child(2) {
      color: #d8bc84;
      font-weight: 500;
      font-family: PingFangTC-Medium, PingFangTC;
    }
  }
}
._main_t4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
  > div {
    &:last-child {
      margin-right: 0;
    }
  }
}
.union_join {
  width: 100%;
  height: 44px;
  background: #d8bc84;
  border-radius: 5px;
  font-size: 17px;
  @include fontSCRegular;
  font-weight: 400;
  color: #fff;
  line-height: 44px;
  margin-top: 40px;
}
</style>
